<template>
	<view class="bosss">
		<view class="duantopbox">
			<view class="serachbox">
				<view class="erjizi">
					<image @click="qushouye" src="https://dfgq3654.laidianbanlv.cn/images/duanju/baisefanhui.png" mode=""></image>
				</view>
				<view @click="goserachpage" class="sergorup">
					<view class="searLeft">
						<image src="https://dfgq3654.laidianbanlv.cn/images/fangdajiang.png" mode=""></image>
					</view>
					<view class="searrihgt">
						<input confirm-type="search" v-model="sousli" @confirm="dianjilsou" type="text"
							placeholder="搜索剧名/主角名" />
					</view>
				</view>
				<!-- <view class="erjizi">
					取消
				</view> -->
			</view>



			<!-- view v-if="searchType" class="huiyuanka">
				<view class="souhistiru">
					<view class="soulishgi">
						搜索历史
					</view>
					<view class="lajit">
						<image @click="qclishi" src="https://dfgq3654.laidianbanlv.cn/images/duanju/lajitong.png"
							mode=""></image>
					</view>

				</view>

				<view class="lishisoubox">
					<view v-for="(item,index) in sousuolishi" :key="index" class="soiulishiitem">
						{{item}}
					</view>
				</view>

			</view> -->


		</view>


		<view v-if="searchType=='noseach'" class="">

			<view class="tuiajibox">
				<view class="tuijaititle">
					为您推荐
				</view>
				<view class="tuijianbnei">
					<view @click="qusousuo(item)" v-for="(item,index) in reciinfo.recommend" :key="index"
						class="tuijiatext">
						{{item}}
					</view>
				</view>
			</view>

			<view class="remensou">
				<view class="tuijaititle">
					热榜搜索
				</view>
				<view class="rebabox">
					<view @click="qusousuo(item)" v-for="(item,index) in reciinfo.hot" :key="index" class="rebtext">
						{{item}}
					</view>
				</view>
			</view>
		</view>


		<view v-if="searchType=='searched'" class="">
			<view class="remenmbox">
				<view class="remenju">
					<view @click="oanksnd(item)" v-for="(item, index) in sousuolist" :key="index" class="rejubox">
						<view class="rejuimg">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="rejunianme">
							{{ item.title.length > 6 ? item.title.substring(0, 6) + '..' : item.title }}
						</view>
					</view>
				</view>
			</view>
			<u-empty margin-top="300" v-if="sousuolist.length===0" text="没有数据" mode="list"></u-empty>

		</view>

	</view>
</template>

<script>
	import request from '../../utils/request.js';
	import api from '../../utils/url.js';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				sousli: "",
				slilist: ['庆余年1', '庆余年2', '庆余年3', '庆余年4', ],
				searchType: "noseach",
				lishisou: [],
				reciinfo: "",
				sousuolist: "",
			}
		},
		computed: {
			...mapState({

			})
		},
		components: {

		},
		onLoad() {
			var that = this
			// var adasg = sessionStorage.getItem("sousuolishi");
			// console.log('触底', that.sousuolishi);
			// that.sousuolishi = adasg.split(",");
			// console.log('触底', typeof(that.sousuolishi));

			that.gethotci()


		},
		onShow() {


		},
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			// console.log("滚动距离为：" + e.scrollTop);
		},
		onReachBottom() {
			// console.log('触底');

		},
		methods: {
			qushouye(){
				uni.navigateBack({
					delta: 1
				})
			},
			qusousuo(item) {
				var that = this
				let data = {
					// category_id: id,
					keyword: item
				}
				request(api.playletlists, 'GET', data)
					.then(response => {
						console.log('playletlists数据--:', response.data);
						if (response.code == "200") {

							that.searchType = "searched"

							that.sousuolist = response.data.data
						} else {
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						}
					})
			},
			dianjilsou(res) {
				var that = this
				if (res.target.value == "") {
					that.searchType = "noseach"
					return false
				}
				console.log(res.target.value)

				let data = {
					// category_id: id,
					keyword: res.target.value
				}
				request(api.playletlists, 'GET', data)
					.then(response => {
						console.log('playletlists数据--:', response.data);
						if (response.code == "200") {

							that.searchType = "searched"

							that.sousuolist = response.data.data
						} else {
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						}
					})
					.catch(response => {
						uni.hideLoading()
					})


				// var lishibox = this.lishisou

				// // console.log(this.lishisou)
				// lishibox.unshift(res.target.value)
				// // console.log(lishibox)
				// sessionStorage.setItem("sousuolishi", lishibox);

				// var adasg = sessionStorage.getItem("sousuolishi");

				// that.sousuolishi = adasg.split(",");


			},
			qclishi() {
				sessionStorage.removeItem("sousuolishi")
			},
			oanksnd(i) {
				var token = localStorage.getItem("token");
				if (token == undefined || token.length == 0 || token.length == null) {
					// uni.showToast({
					// 	title: "请登录",
					// 	icon: "none"
					// })
					setTimeout(() => {
						uni.navigateTo({
							url: "/jingqu/login/login?id=" + i.id
						})
					}, 1500)
				
				} else {
					uni.navigateTo({
						url: '/jingqu/kanju/kanju?id=' + i.id
						 // + '&id=item_id' + i.item_id
					});
				}
			},
			gethotci() {

				let data = {

				}
				request(api.search_keys, 'GET', data)
					.then(response => {
						console.log('search_keys数据--:', response.data);
						if (response.code == "200") {

							this.reciinfo = response.data
						} else {
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						}
					})
					.catch(response => {
						uni.hideLoading()
					})
			},


		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.duantopbox {
		width: 100%;
		// background-color: #dff9ed;
		// background-image: linear-gradient(#a5e6d9, #e6f9f5);
		background-color: #5199FE;
	}

	.serachbox {
		width: 100%;
		display: flex;
		flex-flow: row;
		justify-content: left;
		align-items: center;
		padding: 20rpx 0;
	}

	.sergorup {
		width: 80%;
		margin-left: 30rpx;
		// margin-left: 3%;
		display: flex;
		flex-flow: row;
		justify-content: left;
		align-items: center;
		background-color: white;
		border-radius: 50rpx;
		height: 60rpx;
	}

	.searLeft {
		width: 15%;
	}

	.searLeft image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;

	}

	.searrihgt {
		width: 75%;
	}

	.searrihgt input {
		// border: 1px solid red;
		width: 400rpx;
	}

	.erjizi {
		// width: 10%;
		color: #fff;
		margin-left: 40rpx;

	}

	.erjizi image {
		margin-left: 20rpx;
		width: 40rpx;
		height: 40rpx;
		margin: 0 auto;
		display: block;
	}

	.souhistiru {
		width: 96%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		// margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.soulishgi {
		color: #fff;
		margin-left: 30rpx;
	}

	.souhistiru image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.huiyuanka {
		width: 100%;
	}

	.lishisoubox {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.soiulishiitem {
		background-color: #eee;
		border-radius: 20rpx;
		padding: 5rpx 20rpx;
		color: #999999;
		margin-left: 20rpx;
		text-align: center;
	}

	.tuiajibox {
		width: 100%;
		margin-top: 80rpx;
	}

	.tuijaititle {
		color: #000;
		font-size: 28rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
	}

	.tuijianbnei {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		margin-top: 20rpx;
	}

	.tuijiatext {
		margin-left: 40rpx;
		color: #000;
	}

	.remensou {
		width: 94%;
		margin-left: 3%;
		border-radius: 30rpx;
		margin-top: 40rpx;
		border: 1px solid #eee;
	}

	.rebtext {
		padding: 15rpx 0;
		margin-left: 60rpx;
	}

	.rebabox {
		padding: 40rpx 0;
	}

	.lajit image {
		width: 40rpx;
		height: 40rpx;
	}

	.remenmbox {
		width: 94%;
		margin-top: 30rpx;
		margin-left: 3%;
	}

	.remenju {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		margin-top: 20rpx;
	}

	.rejubox {
		width: 33%;
		margin-top: 10rpx;
	}

	.rejuimg image {
		width: 200rpx;
		height: 300rpx;
		display: block;
		margin: 0rpx auto;
		border-radius: 20rpx;
	}

	.rejunianme {
		color: #000;
		text-align: center;
		margin-top: 15rpx;
	}

	.remntiele {
		width: 100%;
		// margin-left: 3%;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
	}

	.remne {
		font-size: 34rpx;
		font-weight: bold;
	}
</style>